<template>
  <div class="one">
    <div v-for="vm in data" :key="vm">
      <Card :src="vm.cover" :title="vm.title" :time="vm.time" :id="vm.id" />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity";
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import Card from "../../components/card/cardLet.vue";
import img1 from "../../assets/l2.webp";
import img2 from "../../assets/l3.webp";
import img3 from "../../assets/l4.webp";
import { getSingChannel } from "../../axios/api/Allapi";
var data = ref([]);
const { proxy } = getCurrentInstance();

/**
 * @param router 路由id
 */

const router = useRouter();
const routerId = router.currentRoute._value.params.q;
console.log(router.currentRoute._value.params.q);

getSingChannel(routerId).then((res) => {
  data.value = res;
  console.log("data", data);
});
</script>

<style>
.one {
  cursor: pointer;
  margin: 0 auto;
  height: auto;
  max-width: 601px;
}

.style {
  text-align: center;
  line-height: 60px;
  width: 270px;
  height: 100%;
  color: gray;
  background-color: black;
  border: 1px solid #fff;
}
Card {
  width: 100%;
}
</style>